
// components/Rating.tsx
import React, { useState } from 'react';

interface RatingProps {
    onRating: (rating: number) => void;
}

const Rating: React.FC<RatingProps> = ({ onRating }) => {
    const [rating, setRating] = useState<number>(0);

    const handleRating = (value: number) => {
        setRating(value);
        onRating(value);
    };

    return (
        <div className="flex items-center">
            <span className="mr-2 text-lg">{rating > 0 ? `Your Rating: ${rating}` : 'Rate the movie'}</span>
            {[1, 2, 3, 4, 5].map((value) => (
                <svg
                    data-testid={`star-${value}`}
                    key={value}
                    onClick={() => handleRating(value)}
                    className={`w-8 h-8 cursor-pointer ${rating >= value ? 'text-yellow-500' : 'text-gray-300'}`}
                    fill="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path d="M12 .587l3.668 7.568 8.332 1.207-6 5.848 1.415 8.293L12 18.896l-7.415 3.895 1.415-8.293-6-5.848 8.332-1.207z" />
                </svg>
            ))}

        </div>
    );
};

export default Rating;